<template>
  <div class="audio-player flex items-center justify-between px-4 py-2 bg-[var(--el-bg-color-overlay)] border border-[var(--el-border-color)] rounded-lg">
    <!-- 音频信息 -->
    <div class="flex items-center gap-4">
      <!-- <el-image
        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        class="w-[50px] h-[50px] rounded-md"
      /> -->
      <!-- <div>
        <div class="font-medium text-[14px]">{{ currentSong.name }}</div>
        <div class="text-[12px] text-gray-400">{{ currentSong.singer }}</div>
      </div> -->
    </div>

    <!-- 播放控制 -->
    <div class="flex items-center gap-4">
      <Icon icon="majesticons:back-circle" :size="24" class="text-gray-300 cursor-pointer" />
      <Icon
        :icon="isPlaying ? 'solar:pause-circle-bold' : 'mdi:arrow-right-drop-circle'"
        :size="36"
        class="cursor-pointer text-[var(--el-color-primary)]"
        @click="togglePlay"
      />
      <Icon icon="majesticons:next-circle" :size="24" class="text-gray-300 cursor-pointer" />
    </div>

    <!-- 进度条 -->
    <div class="flex items-center gap-4 w-[300px]">
      <span class="text-[12px] text-gray-500">{{ formatTime(currentTime) }}</span>
      <el-slider
        v-model="currentTime"
        :max="duration"
        step="0.1"
        class="flex-1"
        @input="seekAudio"
      />
      <span class="text-[12px] text-gray-500">{{ formatTime(duration) }}</span>
    </div>

    <!-- 音量控制 -->
    <div class="flex items-center gap-4">
      <Icon
        :icon="volume === 0 ? 'tabler:volume-off' : 'tabler:volume'"
        :size="20"
        class="cursor-pointer"
        @click="toggleMute"
      />
      <el-slider
        v-model="volume"
        :max="1"
        step="0.01"
         class="volume-slider"
        @input="adjustVolume"
      />
    </div>

    <!-- 隐藏的音频控件 -->
    <audio ref="audio" :src="src" @timeupdate="updateProgress" @ended="handleEnded"></audio>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'

// Props
defineProps({
  src: {
    type: String,
    default: '',
  },
})

// 当前歌曲信息（可通过父组件注入）
const currentSong = reactive({
  name: '未知歌曲',
  singer: '未知歌手',
})

// 音频状态
const audio = ref<HTMLAudioElement | null>(null)
const isPlaying = ref(false)
const currentTime = ref(0)
const duration = ref(0)
const volume = ref(1) // 默认音量为 1（最大）

// 播放/暂停切换
const togglePlay = () => {
  if (!audio.value) return
  if (isPlaying.value) {
    audio.value.pause()
  } else {
    audio.value.play()
  }
  isPlaying.value = !isPlaying.value
}

// 更新进度条
const updateProgress = () => {
  if (!audio.value) return
  currentTime.value = audio.value.currentTime
  duration.value = audio.value.duration
}

// 跳转到指定时间
const seekAudio = () => {
  if (!audio.value) return
  audio.value.currentTime = currentTime.value
}

// 调节音量
const adjustVolume = () => {
  if (!audio.value) return
  audio.value.volume = volume.value
}

// 静音切换
const toggleMute = () => {
  if (!audio.value) return
  volume.value = volume.value === 0 ? 1 : 0
  audio.value.volume = volume.value
}

// 处理音频播放结束
const handleEnded = () => {
  isPlaying.value = false
}

// 格式化时间（秒 -> 分:秒）
const formatTime = (time: number) => {
  const minutes = Math.floor(time / 60)
  const seconds = Math.floor(time % 60)
  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
}
</script>

<style scoped>
.audio-player {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.volume-slider {
  width: 100px; /* 设置固定宽度 */
  max-width: 120px; /* 可选：设置最大宽度 */
  margin: 0; /* 去除默认外边距 */
}
</style>